<div id="content_header">
  <h3>Course Schedules</h3>
</div>

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

  <form method="POST" role="form" ng-submit="showTable(coursetypes[0].Id, 0)">
      <legend>Schedule Filter</legend>
      <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
              <div class="form-group">
                <label for="TermNumber">Term Number</label>
                <input type="text" id="TermNumber" class="form-control" required="required" title="Term Number" ng-model="params.term_number" ng-disabled="termSelected">
              </div>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
              <div class="form-group">
                <label for="TermYear">Term Year</label>
                <input type="text" id="TermYear" class="form-control" required="required" title="Term Year" ng-model="params.term_year" ng-disabled="termSelected">
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right">
          <div class="form-group">
            <br>
            <div style="margin-top: 5px;">
              <button type="button" title="Previous Term" class="btn btn-info" ng-click="prevTerm()"><i class="fa fa-chevron-left"></i></button>
              <button type="button" title="Next Term" class="btn btn-info" ng-click="nextTerm()"><i class="fa fa-chevron-right"></i></button>
            </div>
          </div>
        </div>

      </div>

      <button type="submit" class="btn btn-primary">Look Up</button>
      <button type="button" class="btn btn-default" ng-click="resetTable()">Reset</button>
    </form>
  </div>

  <!-- <div class="col-md-6">
    <a ui-sref="^.new" class="btn btn-primary">Create a new schedule</a>
  </div> -->
</div>

<div class="row" ng-show="termSelected">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tabset justified="true">
      <tab heading="{{ CourseType.Name }}" ng-repeat="CourseType in coursetypes" select="showTable(CourseType.Id, 0)">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th class="text-center">#</th>
              <th style="text-align:center; vertical-align:middle;" ng-repeat="dayclass in dayclasses">
                {{ dayclass.DayRange }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="time in timeclasses">
              <th style="text-align:center; vertical-align:middle;">{{ time.StartTime | date: 'shortTime'  }} - {{ time.EndTime | date: 'shortTime' }}</th>
              <td ng-repeat="dayclass in dayclasses">
                <div class="panel panel-primary" ng-repeat="courseGroup in courseArray[time.Id][dayclass.Id]">
                  <div class="panel-heading">
                    <h3 class="panel-title">{{ courseGroup.title }}</h3>
                  </div>
                  <div class="panel-body">
                    <accordion close-others="true">
                      <accordion-group is-open="status.open" ng-repeat="courseschedule in courseGroup.content">
                        <accordion-heading>
                          <a href>
                            <b>{{ courseschedule.Course.CourseLevel.Code }}</b>-
                            <b>{{ courseschedule.Suffix ? courseschedule.Suffix : '-' }}</b>/
                            <b>({{ courseschedule.PaidEnrollmentCount }})</b>/
                            <!-- <b>({{ courseschedule.EnrollmentCount }})</b>/ -->
                            {{ courseschedule.Classroom ? courseschedule.Classroom.Code : '-' }}/
                            <span ng-repeat="staff in courseschedule.Staffs">{{ staff.Code }}{{ (($index+1) < courseschedule.Staffs.length) ? '-' : '' }}</span>
                            {{ (courseschedule.Staffs.length > 0) ? '' : '-' }}
                            <!-- {{ TeacherTypes[courseschedule.Course.TeacherType].Code }} -->
                            <!-- {{ courseschedule.CourseName }} -->
                            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
                          </a>
                        </accordion-heading>
                        <dl>
                          <dd class="text-muted"><i class="fa fa-building-o"></i> {{ courseschedule.Classroom ? courseschedule.Classroom.Name : 'Not Set' }}</dd>
                          <dd class="text-muted"><i class="simple-icon-users"></i> {{ courseschedule.PaidEnrollmentCount }}</dd>
                          <dd class="text-muted" ng-repeat="teacher in courseschedule.Staffs"><i class="simple-icon-user"></i> {{ teacher.Name }} <span class="label label-default" ng-if="courseschedule.SigningTeacher == teacher.Id">Signing Teacher</span></dd>
                        </dl>
                        <a href="" ng-click="maintainSchedule(courseschedule.Id, courseschedule)">Maintain Schedule</a>
                        &nbsp
                        <a href ui-sref="^.activities({id: courseschedule.Id})">Activities</a>
                        &nbsp
                        <span class="dropdown">
                          <a href class="dropdown-toggle">Other Action</a>
                          <ul class="dropdown-menu">
                            <li><a href ui-sref="classes.show.assessment({ id: courseschedule.Id })">Asessment</a></li>
                            <li><a href ui-sref="courseSchedules.info({ id: courseschedule.Id })">Info</a></li>
                            <li><a href ui-sref="classes.show.report({ id: courseschedule.Id })">Class Report</a></li>
                            <li><a href ui-sref="courseSchedules.student_ids({ id: courseschedule.Id })">Student Ids</a></li>
                            <li ng-if="courseschedule.PaidEnrollmentCount == 0"><a href ng-really-message="Are you sure?" ng-really-click="delete('course_schedules', courseschedule.Id, {collection: courseGroup.content, index: $index})">Delete</a></li>
                          </ul>
                        </span>
                      </accordion-group>
                    </accordion>
                    <a href="" ng-click="addSchedule(time.Id, dayclass.Id, courseGroup.value)">Schedule a new course</a>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </tab>
    </tabset>
  </div>
</div>

<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="psForm">
  <div style="padding:20px">
    <h3>Schedule a course <a href="" ng-click="psForm = !psForm"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <form name="termForm" role="form" ng-submit="submitSchedule()">

      <div class="form-group" ng-class="{ 'has-error': errors.errors.Term}">
        <label>Term</label>
        <span class="form-control">{{ courseScheduleNew.Term.Number  }} / {{ courseScheduleNew.Term.Year }}</span>
        <error-widget field="errors.errors.Term"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.errors.TimeClass}">
        <label>Time</label>
        <span class="form-control">{{ courseScheduleNew.TimeClass.StartTime  | date: 'shortTime'  }} - {{ courseScheduleNew.TimeClass.EndTime  | date: 'shortTime' }}</span>
        <error-widget field="errors.errors.TimeClass"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.errors.DayClass}">
        <label>Day</label>
        <span class="form-control">{{ courseScheduleNew.DayClass.DayRange  }}</span>
        <error-widget field="errors.errors.DayClass"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.errors.StartDate}">
        <label class="required" for="">Start Date</label>
        <div class="input-group" ng-click="openDatepicker($event, 0)">
          <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="courseScheduleNew.StartDate" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
          <input type="text" class="form-control" ng-disabled="true" ng-value="courseScheduleNew.StartDate | date: 'dd MMMM yyyy'">
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
        <error-widget field="errors.errors.StartDate"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.errors.EndDate}">
        <label class="required" for="">End Date</label>
        <div class="input-group" ng-click="openDatepicker($event, 1)">
          <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="courseScheduleNew.EndDate" is-open="datePicker.isOpen[1]" min-date="courseScheduleNew.StartDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
          <input type="text" class="form-control" ng-disabled="true" ng-value="courseScheduleNew.EndDate | date: 'dd MMMM yyyy'">
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
        <error-widget field="errors.errors.EndDate"></error-widget>
      </div>

      <div ng-show="errors.errors.Course">
        coba
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.errors.Course || errors.errors.CourseFee}">
        <label for="Course">Course</label>
        <select name="Course" class="form-control" id="Course" ng-model="courseScheduleNew.Course" ng-options="course as course.CourseLevel.Name +'/'+ course.CourseLevel.Code +'/'+ TeacherTypes[course.TeacherType].Code for course in courses" required>
          <option value="" ng-hide="courseScheduleNew.Course.Id">Select a Course.</option>
        </select>
        <error-widget field="errors.errors.Course"></error-widget>
        <error-widget field="errors.errors.CourseFee"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.errors.Suffix}">
        <label for="Suffix">Suffix</label>
        <input type="text" name="Suffix" class="form-control" id="Suffix" placeholder="Input field" ng-model="courseScheduleNew.Suffix" required>
        <error-widget field="errors.errors.Suffix"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
      <button type="button" class="btn btn-info" ng-click="psForm = !psForm">Cancel</button>
    </form>
  </div>
</pageslide>

<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="psFormEdit">
  <div style="padding:20px">
    <h3>Maintain Course <a href="" ng-click="psFormEdit = !psFormEdit"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <form name="termForm" role="form" ng-submit="updateSchedule(selectedCourse)">

      <div class="form-group" ng-class="{ 'has-error': errors.Term}">
        <label>Term</label>
        <span class="form-control">{{ courseScheduleCurrent.Term.Number  }} / {{ courseScheduleCurrent.Term.Year }}</span>
        <error-widget field="errors.Term"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.TimeClass}">
        <label>Time / Day</label>
        <span class="form-control">{{ courseScheduleCurrent.TimeClass.StartTime  | date: 'shortTime'  }} - {{ courseScheduleCurrent.TimeClass.EndTime  | date: 'shortTime' }} / {{ courseScheduleCurrent.DayClass.DayRange  }}</span>
        <error-widget field="errors.TimeClass"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Course}">
        <label for="Course">Course</label>
        <span class="form-control">{{ courseScheduleCurrent.Course.CourseLevel.Name +'/'+ courseScheduleCurrent.Course.CourseLevel.Code +'/'+ TeacherTypes[courseScheduleCurrent.Course.TeacherType].Code }}</span>
        <error-widget field="errors.Course"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Suffix}">
        <label for="Suffix">Suffix</label>
        <span class="form-control">{{ courseScheduleCurrent.Suffix  }}</span>
        <error-widget field="errors.Suffix"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.StartDate}">
        <label class="required" for="">Start Date</label>
        <div class="input-group" ng-click="openDatepicker($event, 0)">
          <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="courseScheduleCurrent.StartDate" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
          <input type="text" class="form-control" ng-disabled="true" ng-value="courseScheduleCurrent.StartDate | date: 'dd MMMM yyyy'">
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
        <error-widget field="errors.StartDate"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.EndDate}">
        <label class="required" for="">End Date</label>
        <div class="input-group" ng-click="openDatepicker($event, 1)">
          <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="courseScheduleCurrent.EndDate" is-open="datePicker.isOpen[1]" min-date="courseScheduleCurrent.StartDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
          <input type="text" class="form-control" ng-disabled="true" ng-value="courseScheduleCurrent.EndDate | date: 'dd MMMM yyyy'">
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
        <error-widget field="errors.EndDate"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Classroom}">
        <label for="Classroom">Classroom</label>
        <select name="Classroom" class="form-control" id="Classroom" ng-model="courseScheduleCurrent.Classroom.Id" ng-options="classroom.Id as classroom.Name for classroom in classrooms">
          <option value="" ng-hide="courseScheduleCurrent.Classroom.Id">Select a Classroom.</option>
        </select>
        <error-widget field="errors.Classroom"></error-widget>
      </div>

      <div class="form-group" ng-show="isId" ng-class="{ 'has-error': errors.Staffs}">
        <label for="IndTeach">Indonesian Teacher</label>
        <select name="IndTeach" class="form-control" id="IndTeach" ng-model="courseScheduleCurrent.Staffs[0].Id" ng-options="teacher.Id as (teacher.Code + ' - ' + teacher.Name) for teacher in localTeachers | orderBy:'Code'">
          <option value="">Select an Indonesian teacher.</option>
        </select>
      </div>

      <div class="form-group" ng-show="isNat" ng-class="{ 'has-error': errors.Staffs}">
        <label for="NacTeach">Native Teacher</label>
        <select name="NacTeach" class="form-control" id="NacTeach" ng-model="courseScheduleCurrent.Staffs[0].Id" ng-options="teacher.Id as (teacher.Code + ' - ' + teacher.Name) for teacher in nativeTeachers | orderBy:'Code'">
          <option value="">Select a native teacher.</option>
        </select>
        <error-widget field="errors.Staffs"></error-widget>
      </div>

      <div class="form-group" ng-show="isCom" ng-class="{ 'has-error': errors.Staffs}">
        <label for="Teacher1">Teacher 1 (Signing Teacher)</label>
        <select name="Teacher1" class="form-control" id="Teacher1" ng-model="courseScheduleCurrent.Staffs[0].Id" ng-options="teacher.Id as (teacher.Code + ' - ' + teacher.Name) for teacher in staffs | orderBy:'Code'">
          <option value="">Select an Teacher 1.</option>
        </select>
      </div>

      <div class="form-group" ng-show="isCom" ng-class="{ 'has-error': errors.Staffs}">
        <label for="Teacher2">Teacher 2</label>
        <select name="Teacher2" class="form-control" id="Teacher2" ng-model="courseScheduleCurrent.Staffs[1].Id" ng-options="teacher.Id as (teacher.Code + ' - ' + teacher.Name) for teacher in staffs | orderBy:'Code'">
          <option value="">Select a Teacher 2.</option>
        </select>
        <error-widget field="errors.Staffs"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
  </div>
</pageslide>

<pageslide ps-speed="0.25" ps-auto-close="true" ps-open="psStudent">
  <div style="padding:20px">
    <h3>Schedule a course <a href="" ng-click="psStudent = !psStudent"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <form name="termForm" role="form" ng-submit="searchStudent()">

      <div class="form-group" ng-class="{ 'has-error': errors.StartDate}">
        <label for="keyword">Student Name</label>
        <input type="text" class="form-control" id="keyword" placeholder="Input field" ng-model="keyword">
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.StartDate}">
        <label for="Note">Note</label>
        <input type="text" class="form-control" id="Note" placeholder="Input field" ng-model="newEnrollment.Note">
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
    <div class="row" ng-show="showResults">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>Student</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="student in students">
              <td><a href="" ng-click="selectThis(student.Id)">{{ student.FullName }} - {{ student.SID }}</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</pageslide>